<template>
	<el-tabs class="container" v-model="activeName" @tab-click="choeseTab">
		<el-tab-pane label="任务配置" name="task" lazy >
			<task-config />
		</el-tab-pane>
		<el-tab-pane label="系统配置" name="system" lazy >
			<system-config />
		</el-tab-pane>
	</el-tabs>
</template>

<script>
import SystemConfig from "./components/SystemConfig";
import TaskConfig from "./components/TaskConfig";

export default {
	name: "TabsPage",
	components: {
		SystemConfig,
		TaskConfig
	},
	data() {
		return {
			activeName: location.hash.split("=")[1] ? location.hash.split("=")[1] : "task"
		};
	},
	methods: {
		choeseTab(res) {
			this.$router.push({
				path: `/tabsPage?tab=${res.name}`
			});
			if (res.$children[0]) {
				res.$children[0].loadData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 20px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	/deep/ .el-tabs__header {
		height: 40px;
	}
	/deep/ .el-tabs__content {
		flex: 1;
		.el-tab-pane {
			height: 100%;
		}
	}
}
</style>
